import { Button, Form, Input, InputNumber } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import React from "react";
import "./index.scss";
import { positionStyle, layout, validateMessages } from "../ArticleDetailCom/DrawerMultilayer/SettingArticle";
const PageSettingCom = ({ closeSettingVisible, openOssFileVisible, handlerInfo, handlerDataInfo }) => {
  return (
    <div>
      <Form {...layout} validateMessages={validateMessages}>
        <Form.Item label="封面">
          <Input.Group>
            <Input
              value={handlerInfo.cover}
              style={{ width: "calc(100% - 32px)" }}
              placeholder="请输入页面封面"
              onChange={(e) => handlerDataInfo(e.target.value, "cover")}
            />
            <Button onClick={openOssFileVisible} icon={<CopyOutlined />} />
          </Input.Group>
        </Form.Item>
        <Form.Item label="路径">
          <Input placeholder="请配置页面路径" value={handlerInfo.pathUrl} onChange={(e) => handlerDataInfo(e.target.value, "pathUrl")} />
        </Form.Item>
        <Form.Item label="顺序">
          <InputNumber value={handlerInfo.order} onChange={(e) => handlerDataInfo(e, "order")} />
        </Form.Item>
      </Form>
      <div style={positionStyle}>
        <Button type="primary" onClick={closeSettingVisible}>
          确认
        </Button>
      </div>
    </div>
  );
};

export default PageSettingCom;
